<template>
    <h1>{{ "child" }}</h1>
    <input v-focus type="text" :value="name" @input="$emit('update:name', $event.target.value)" placeholder="Enter name" />
    <input type="number" :value="age" @input="changeAge($event)" placeholder="Enter age" />
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
defineProps(["name", "age"]);
const emit = defineEmits(["update:name", "update:age"]);

const changeAge = (event: Event) => {
    const input = event.target as HTMLInputElement;
    const newAge = parseInt(input.value, 10);
    if (!isNaN(newAge)) {
        // 触发更新 age 的事件
        emit("update:age", newAge);
    }
};
</script>

<style scoped></style>
